<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      发布委托
    </view>
    <view class="center">
      <template v-if="index == 3">
        <view class="center_item">
          <span class="center_item_span">看车地点</span>
          <input
            @click="openMap"
            class="input"
            v-model="locationSite"
            type="text"
            disabled
            placeholder="请选择看车地点"
          />
          <image
            @click="openMap"
            class="image"
            src="https://pic.bangbangtongcheng.com/static/bbcz/dingwei01.png"
            mode=""
          ></image>
        </view>
        <view class="center_item">
          <span class="center_item_span">联系方式</span>
          <input
            class="input"
            v-model="phone"
            maxlength="11"
            type="digit"
            placeholder="请填写联系方式"
          />
        </view>
        <view
          class="center_items"
          style="border: none; margin-top: 40rpx; min-height: 160rpx; align-items: flex-start"
        >
          <view class="center_item_span">备注</view>
          <view class="kuang">
            <textarea
              maxlength="300"
              class="textarea"
              v-model="reportContent"
              placeholder="请输入内容"
            />
            <p>{{ reportContent.length }}/300</p>
          </view>
        </view>
      </template>
      <template v-if="index == 1 || index == 2">
        <view class="center_item">
          <span class="center_item_span">房源类型</span>
          <uni-data-select
            class="text"
            v-model="typeIndex4"
            :clear="false"
            :localdata="type4"
          ></uni-data-select>
          <!-- <picker @change="PickerChange" data-type="4" range-key="valueName" :range="type4">
						<view class="picker" v-if="typeIndex4 != -1">{{type4[typeIndex4].valueName}}</view>
						<view class="picker" style="color: #666" v-else>请选择房源类型</view>
					</picker> -->
        </view>
        <view class="center_item" v-if="typeIndex4 != -1">
          <!-- 这个看房对应着房源的类型 -->
          <span class="center_item_span"
            >{{
              typeIndex4 == 0
                ? '住宅'
                : typeIndex4 == 1
                ? '商铺'
                : typeIndex4 == 2
                ? '写字楼'
                : typeIndex4 == 3
                ? '厂房'
                : typeIndex4 == 4
                ? '土地'
                : '车位'
            }}位置</span
          >
          <input
            @click="openMap"
            class="input"
            v-model="locationSite"
            type="text"
            disabled
            placeholder="请选择看房地点"
          />
          <image
            @click="openMap"
            class="image"
            src="https://pic.bangbangtongcheng.com/static/bbcz/dingwei01.png"
            mode=""
          ></image>
        </view>
        <view class="center_item" v-if="typeIndex4 != -1">
          <span class="center_item_span">联系方式</span>
          <input
            class="input"
            type="digit"
            maxlength="11"
            v-model="phone"
            placeholder="请填写联系方式"
          />
        </view>
        <view
          v-if="typeIndex4 != -1"
          class="center_items"
          style="border: none; margin-top: 40rpx; min-height: 160rpx; align-items: flex-start"
        >
          <view class="center_item_span">备注</view>
          <view class="kuang">
            <textarea
              maxlength="300"
              class="textarea"
              v-model="reportContent"
              placeholder="请输入内容"
            />
            <p>{{ reportContent.length }}/300</p>
          </view>
        </view>
      </template>
    </view>
    <view class="tijiao">
      <view class="tishi">
        {{ disclaimers }}
      </view>
      <view class="flex">
        <radio style="transform: scale(0.8)" :checked="checked" @click="checked = !checked"></radio>
        <view style="display: inline-block">
          <span>发布即默认同意</span>
          <span style="color: #64b6a8" @click="toUs(3)">《用户协议》</span>
          <span style="color: #64b6a8" @click="toUs(2)">《隐私协议》</span>
        </view>
      </view>
      <view class="btn" @click="keyEntrust()">一键委托</view>
    </view>
    <uniBall></uniBall>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        imgUrl: this.$imgSrc,
        userInfo: uni.getStorageSync('Pduser'),
        // 协议
        checked: false,
        latitude: '',
        longitude: '',
        locationSite: '',
        type4: [
          { value: 0, text: '住宅' },
          { value: 1, text: '商铺' },
          { value: 2, text: '写字楼' },
          { value: 3, text: '厂房' },
          { value: 4, text: '土地' },
          { value: 5, text: '车位' },
        ],
        typeIndex4: -1,
        reportContent: '',
        index: '',
        phone: '',
        disclaimers: '',
      }
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
    onLoad(option) {
      this.index = option.index
      if (option.type) {
        this.typeIndex4 = option.type
      }
      if (uni.getStorageSync('locationState') == 1) {
        this.getLocation()
      }
      this.Disclaimers()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    mounted() {},
    methods: {
      // 免责声明
      Disclaimers() {
        let type = ''
        if (this.index == 3) {
          type = 15
        } else {
          type = 2
        }
        this.$myRequest
          .get('/api/mobile/public/getDisclaimersByDisclaimerLocation', {
            disclaimerLocation: type,
          })
          .then((res) => {
            this.disclaimers = res.Disclaimers.disclaimerContent
          })
      },
      toUs(type) {
        uni.navigateTo({ url: '/pages_my/Us?type=' + type })
      },
      keyEntrust() {
        console.log(this.typeIndex4, '1111')
        if (!this.checked) {
          uni.showToast({
            title: '请同意协议',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.locationSite) {
          uni.showToast({
            title: '请选择' + (this.index == 3 ? '看车地点' : '房源位置'),
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.latitude) {
          uni.showToast({
            title: '请选择' + (this.index == 3 ? '看车地点' : '房源位置'),
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.phone) {
          uni.showToast({
            title: '请填写联系电话',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (this.phone.length != 11) {
          uni.showToast({
            title: '请输入正确格式的电话号码',
            icon: 'none',
            mask: true,
          })
          return
        }
        let data = {
          clientId: this.userInfo.id,
          businessType: this.index == 3 ? '2' : '1',
          delegationType: this.typeIndex4 == -1 ? '' : this.typeIndex4 + 1,
          position: this.locationSite,
          longitude: this.longitude,
          latitude: this.latitude,
          contactInformation: this.phone,
          remarks: this.reportContent,
          entrustedContent:
            this.index == 1 ? '委托卖房' : this.index == 2 ? '委托租房' : '委托卖车',
        }
        this.$myRequest.post('/api/mobile/public/publishDelegation', data).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index',
            })
          }, 500)
        })
      },
      PickerChange(e) {
        let index = e.detail.value
        this.typeIndex4 = index
      },
      // 获取定位
      async getLocation() {
        this.getLocation1()
      },
      getLocation1() {
        let _this = this
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          geocode: true,
          success(res) {
            _this.latitude = res.latitude
            _this.longitude = res.longitude
          },
          fail(res) {
            console.log(res, '经纬度没有授权')
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              uni.showModal({
                title: '提示',
                content: '您已关闭位置权限或获取位置信息失败',
                success: function (res) {
                  if (res.confirm) {
                    // plus.runtime.openURL("app-settings:");
                    if (plus.os.name === 'iOS') {
                      plus.runtime.openURL('app-settings://')
                    } else {
                      var Intent = plus.android.importClass('android.content.Intent')
                      var Settings = plus.android.importClass('android.provider.Settings')
                      var Uri = plus.android.importClass('android.net.Uri')
                      var mainActivity = plus.android.runtimeMainActivity()
                      var intent = new Intent()
                      intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                      var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
                      intent.setData(uri)
                      mainActivity.startActivity(intent)
                    }
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                },
              })
              return false
            }
          },
        })
      },
      openMap() {
        let that = this
        if (that.latitude == '') {
          this.getLocation()
        }
        if (that.latitude == '') {
          return false
        }
        uni.chooseLocation({
          latitude: that.latitude,
          longitude: that.longitude,
          success: function (res) {
            that.locationSite = res.address
            that.latitude = res.latitude
            that.longitude = res.longitude
          },
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  /deep/.uni-select {
    border: none;
    border-bottom: none;
    font-size: 34rpx;
    padding-left: 0;
  }
  ::v-deep {
    .uni-select__input-placeholder {
      font-size: 34rpx;
    }
  }
  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
  }

  .box {
    padding-bottom: 160rpx;
  }

  .center {
    /* #ifdef MP  */
    height: calc(100vh - 96rpx - var(--status-bar-height) - 22px - 196rpx);
    /* #endif */
    /* #ifdef H5 || APP-PULS */
    height: calc(100vh - 96rpx - var(--status-bar-height) - 196rpx);
    /* #endif */
    /* #ifdef APP */
    height: calc(100vh - 96rpx - var(--status-bar-height) - 196rpx);
    /* #endif */
    background-color: #fff;
    padding: 0 40rpx;
    padding-top: 29rpx;
    .center_items {
      height: 97rpx;
      width: 670rpx;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
      position: relative;
      /deep/ uni-picker {
        flex: 1;
      }
      .center_item_span {
        font-size: 34rpx;
        font-weight: 600;
        color: #000000;
        margin-right: 40rpx;
        margin-left: 22rpx;
        margin-bottom: 20rpx;
      }
      .input {
        flex: 1;
        font-size: 34rpx;
        color: #333333;
        margin-right: 70rpx;
      }
      .kuang {
        position: relative;
        flex: 1;
        min-height: 160rpx;
        padding-bottom: 60rpx;
        background-color: #fff;
        border: 1px solid #c9c9c9;
        textarea {
          width: 100%;
          padding-left: 24rpx;
          padding-top: 14rpx;
          line-height: 50rpx;
          letter-spacing: 2rpx;
        }
        p {
          position: absolute;
          bottom: 20rpx;
          right: 20rpx;
          color: #999999;
        }
      }
      .image {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
    .center_item {
      height: 97rpx;
      width: 670rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
      position: relative;
      /deep/ uni-picker {
        flex: 1;
      }
      .text {
        font-size: 34rpx;
      }
      .center_item_span {
        font-size: 34rpx;
        font-weight: 600;
        color: #000000;
        margin-right: 40rpx;
        margin-left: 22rpx;
      }
      .input {
        flex: 1;
        font-size: 34rpx;
        color: #333333;
        margin-right: 70rpx;
      }
      .kuang {
        position: relative;
        flex: 1;
        min-height: 160rpx;
        margin: 0 40rpx;
        padding-bottom: 40rpx;
        background-color: #fff;
        border: 1px solid #c9c9c9;
        textarea {
          width: 100%;
          padding-left: 24rpx;
          padding-top: 14rpx;
          line-height: 50rpx;
          letter-spacing: 2rpx;
        }
        p {
          position: absolute;
          bottom: 20rpx;
          right: 20rpx;
          color: #999999;
        }
      }
      .image {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
  }

  .tijiao {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
    padding-bottom: 40rpx;
    background-color: #fff;
    z-index: 99;
    .tishi {
      padding: 0 20rpx;
      text-align: left;
      font-size: 24rpx;
      font-weight: 400;
      color: #999999;
    }
    .flex {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 44rpx;
      margin-bottom: 25rpx;
    }

    checkbox {
      vertical-align: top;
      margin-right: 6rpx;
      margin-left: 40rpx;
    }

    span {
      font-size: 26rpx;
    }
    .btn {
      width: 670rpx;
      height: 80rpx;
      background: #64b6a8;
      border-radius: 49rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      font-size: 34rpx;
      margin: 0 auto;
    }
  }
</style>
